<!-- 订单信息 -->
<template>
    <!--  待发货 -->
    <div class="OrderStatus" v-for="(time, index) in orders" :key="index">
        <!-- 根据父组件传递的值判断订单的状态 -->
        <section class="order-card" v-if="time.status == status || status == 0">
            <ul class="order-list">
                <li class="order-item">
                    <div class="store-info">
                        <img :src="time.img" class="header-img" />
                        <span>{{ time.shopName }}</span>
                    </div>
                    <span>{{ time.statusName }}</span>
                </li>
                <li class="order-desc">
                    <img :src="time.imgUrl" />
                    <div class="order-detail">
                        <p class="info-one">
                            <span>{{ time.product }}</span>
                            <i>{{ time.jin }}</i>
                        </p>
                        <p class="info-two">
                            <span>{{ time.specification }}</span>
                            <span>{{ time.quantity }}</span>
                        </p>
                    </div>
                </li>
                <li class="order-total">
                    <span>订单总价：</span>
                    <i>{{ time.totalPrice }}</i>
                </li>
                <li class="order-count">
                    <span>实付款：</span>
                    <i>{{ time.outOfPocket }}</i>
                </li>
            </ul>
        </section>
    </div>
    <div style="height: 100px;"></div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
const route = useRoute();
const status = ref();
// 接受父组件传的值
onMounted(() => {
    status.value = route.params.id
})
const orders = reactive(
    [
        {
            img: 'src/assets/sort/tx.jpg',
            shopName: '我爱生活',
            imgUrl: 'src/assets/home/home6.jpg',
            status: 1,
            statusName: '待支付',
            product: '葡萄',
            specification: '水果',
            jin: '￥100',
            quantity: 'x2',
            totalPrice: '￥200',
            outOfPocket: '￥200'
        },
        {
            img: 'src/assets/sort/tx.jpg',
            shopName: '我爱生活',
            imgUrl: 'src/assets/home/home5.jpg',
            status: 2,
            statusName: '待发货',
            product: '西瓜',
            specification: '水果',
            jin: '￥200',
            quantity: 'x2',
            totalPrice: '￥400',
            outOfPocket: '￥400'
        },
        {
            img: 'src/assets/sort/tx.jpg',
            shopName: '我爱生活',
            imgUrl: 'src/assets/home/home5.jpg',
            status: 3,
            statusName: '待收货',
            product: '西瓜',
            specification: '水果',
            jin: '￥200',
            quantity: 'x2',
            totalPrice: '￥400',
            outOfPocket: '￥400'
        },
        {
            img: 'src/assets/sort/tx.jpg',
            shopName: '我爱生活',
            imgUrl: 'src/assets/home/home5.jpg',
            status: 4,
            statusName: '已完成',
            product: '西瓜',
            specification: '水果',
            jin: '￥200',
            quantity: 'x2',
            totalPrice: '￥400',
            outOfPocket: '￥400'
        },
        {
            img: 'src/assets/sort/tx.jpg',
            shopName: '我爱生活',
            imgUrl: 'src/assets/home/home6.jpg',
            status: 4,
            statusName: '已完成',
            product: '葡萄',
            specification: '水果',
            jin: '￥200',
            quantity: 'x2',
            totalPrice: '￥400',
            outOfPocket: '￥400'
        }
    ]
)
</script>
  
<style scoped lang="scss">
.OrderStatus {
    height: 100%;
    padding: 0 16px;

    .order-card {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
        padding: 10px;
        margin-top: 20px;

        .order-list {
            .order-item {
                display: flex;
                justify-content: space-between;

                &>span {
                    color: #d8182d;
                    font-size: 11px;
                }

                .store-info {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 10px;

                    .header-img {
                        width: 24px;
                        height: 24px;
                    }

                    span {
                        color: #3a3a3a;
                        padding-left: 3px;
                        font-size: 11px;
                    }
                }
            }

            .order-desc {
                padding-top: 10px;
                display: flex;
                justify-content: space-between;

                img {
                    width: 80px;
                    height: 80px;
                    display: inline-block;
                    background-color: #d8182d;
                    border-radius: 4px;
                }

                .order-detail {
                    flex: 1;
                    padding-left: 16px;
                    padding-bottom: 4px;

                    .info-one,
                    .info-two {
                        display: flex;
                        justify-content: space-between;
                        font-size: 11px;
                    }

                    .info-one {
                        color: #3a3a3a;
                        padding-bottom: 5px;

                        i {
                            font-weight: 700;
                        }
                    }

                    .info-two {
                        color: #949497;
                    }
                }
            }

            .order-total {
                color: #949497;
                font-size: 11px;
                padding-bottom: 5px;
                display: flex;
                justify-content: flex-end;
            }

            .order-count {
                display: flex;
                justify-content: flex-end;
                font-size: 13px;

                i {
                    color: #d8182d;
                    padding-left: 5px;
                    font-weight: 700;
                }

                span {
                    color: #3a3a3a;
                }
            }
        }
    }
}
</style>
  